<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>毕业数据可视化</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/app.css" />
	</head>
	
	<body class="bg01">
		<header class="header">
			<h3>毕业数据可视化</h3>
		</header>
		
		<div class="wrapper">
			<div class="container-fluid">
				<div class="row fill-h">
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<!-- 地图飞线 -->
								<div class="fill-h" id="flyMap"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div class="xpanel">
								<!-- 地图散点 -->
								<div class="fill-h" id="scatterMap"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<!-- 省份地图 -->
								<div class="fill-h" id="provinceMap"></div>
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<!-- 城市地图 -->
								<div class="fill-h" id="cityMap"></div>
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<!-- 区县地图 -->
								<div class="fill-h" id="countyMap"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/echarts-3.8.5.min.js"></script>
		<script type="text/javascript" src="js/echarts-map-world.js"></script>
		<script type="text/javascript" src="js/echarts-map-china.js"></script>
		<script type="text/javascript" src="js/echarts-china-provinces/jiangsu.js"></script>
		<script type="text/javascript" src="js/echarts-china-cities/jiang1_su1_su1_zhou1.js"></script>
		<script type="text/javascript" src="js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js"></script>
		<script type="text/javascript">
			$(function() {
				/******************* 地图飞线 ******************/
				//初始化echarts实例
				const flyMap = echarts.init(document.getElementById("flyMap"));
		        //城市经纬度
		        const originName = '济源';
		        const flyGeo = {
		        	'济源':[112.62, 35.08],'哈尔滨':[126.64, 45.75],'烟台':[121.43, 37.54],'武汉':[114.37, 30.54],'克拉玛依':[84.93, 45.55],'厦门':[118.10, 24.59],'南京':[118.94, 32.12],'沈阳':[123.41, 41.93],'济南':[116.82, 36.56],'天津':[117.13, 39.19],'北京':[116.35, 40.00],'上海':[121.40, 31.32],'成都':[103.94, 30.76],'石河子':[86.06, 44.31],'新乡':[113.92, 35.33],'洛阳':[112.43, 34.61],'郑州':[113.54, 34.82],'西安':[108.77, 34.04],'石家庄':[114.53, 38.00],'开封':[114.38, 34.82],'信阳':[114.05, 32.14],
		        };
		        //飞线数据
		        var flyVal = [
		        		[{name:'济源'}, {name:'济源', value:48}],[{name:'哈尔滨'}, {name:'济源', value:1}],[{name:'烟台'}, {name:'济源', value:1}],[{name:'武汉'}, {name:'济源', value:2}],[{name:'克拉玛依'}, {name:'济源', value:1}],[{name:'厦门'}, {name:'济源', value:1}],[{name:'南京'}, {name:'济源', value:1}],[{name:'沈阳'}, {name:'济源', value:1}],[{name:'济南'}, {name:'济源', value:1}],[{name:'天津'}, {name:'济源', value:3}],[{name:'北京'}, {name:'济源', value:5}],[{name:'上海'}, {name:'济源', value:2}],[{name:'成都'}, {name:'济源', value:2}],[{name:'石河子'}, {name:'济源', value:1}],[{name:'新乡'}, {name:'济源', value:2}],[{name:'洛阳'}, {name:'济源', value:1}],[{name:'郑州'}, {name:'济源', value:10}],[{name:'西安'}, {name:'济源', value:6}],[{name:'石家庄'}, {name:'济源', value:1}],[{name:'开封'}, {name:'济源', value:6}],[{name:'信阳'}, {name:'济源', value:1}],
		        ];
		        //数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}]
		        const convertFlyData = function(data) {
		            let res = [];
		            for(let i=0;i<data.length;i++) {
		                let dataItem = data[i];
		                let toCoord = flyGeo[dataItem[0].name];
		                let fromCoord = flyGeo[dataItem[1].name];
		                if(fromCoord && toCoord) {
		                    res.push({
		                        fromName: dataItem[1].name, 
		                        toName: dataItem[0].name, 
		                        coords: [fromCoord, toCoord]
		                    });
		                }
		            }
		            return res;
		        };
		        //报表配置
		        const flySeries = [];
		        [[originName, flyVal]].forEach(function(item, i) {
					flySeries.push({   
				        name: item[0],
				        type: 'lines',
				        zlevel: 1,
				        symbol: ['none', 'none'],
				        symbolSize: 0,
				        effect: { //特效线配置
				            show: true,
				            period: 5, //特效动画时间，单位s
				            trailLength: 0.1, //特效尾迹的长度，从0到1
				            symbol: 'arrow',
				            symbolSize: 5
				        },
				        lineStyle: {
				            normal: {
				                color: '#f19000',
				                width: 1,
				                opacity: 0.6,
				                curveness: 0.2 //线的平滑度
				            }
				        },
				        data: convertFlyData(item[1])
				    }, {
				        name: item[0],
				        type: 'effectScatter',
				        coordinateSystem: 'geo',
				        zlevel: 2,
				        rippleEffect: { //涟漪特效
				            period: 5, //特效动画时长 
				            scale: 4, //波纹的最大缩放比例
				            brushType: 'stroke' //波纹的绘制方式：stroke | fill
				        },
				        label: {
				            normal: {
				                show: false,
				                position: 'right',
				                formatter: '{b}'
				            }
				        },
				        symbol: 'circle',
				        symbolSize: function (val) {
				        	//根据某项数据值设置符号大小
				            return val[2] / 10; 
				        },
				        itemStyle: {
				            normal: {
				            	color: '#f19000'
				            }
				        },
				        data: item[1].map(function(dataItem) {
				            return {
				                name: dataItem[1].name,
				                value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
				            };
				        })
				    }, { //与上层的点叠加
				    	name: item[0],
				        type: 'scatter',
				        coordinateSystem: 'geo',
				        zlevel: 3,
				        symbol: 'circle',
				        symbolSize: function (val) {
				        	//根据某项数据值设置符号大小
				            return val[2] / 15; 
				        },
				        itemStyle: {
				            normal: {
				            	color: '#f00'
				            }
				        },
				        data: item[1].map(function(dataItem) {
				            return {
				                name: dataItem[1].name,
				                value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
				            };
				        })
				    });
		        });
	
				//报表配置项
				const flyMapOpt = {
					title: {
						show: false,
						text: '地图飞线',
						x: 'center',
						textStyle: {
							color: '#fff'
						}
					},
	                tooltip: {
	                    trigger: 'item',
	                    formatter: function(params) {
	                        if(params.value) {
	                            return params.name + ' : ' + params.value[2];
	                        }else {
	                            return params.name;
	                        }
	                    }
	                },
				    geo: {
				        map: 'china',
				        roam: false, //开启鼠标缩放和漫游
				        zoom: 1, //地图缩放级别
						selectedMode: false, //选中模式：single | multiple
						left: 0,
						right: 0,
						top: 0,
						bottom: 0,
						layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
						layoutSize: '100%', //保持地图宽高比
				        label: {
				            emphasis: {
				                show: false
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: '#101f32',
				                borderWidth: 1.1,
				                borderColor: '#43d0d6'
				            },
				            emphasis: {
				                areaColor: '#069'
				            }
				        }
				    },
				    series: flySeries
				};
				//渲染报表
				flyMap.setOption(flyMapOpt);
				
				/***************** 地图散点 ******************/
				//初始化echarts实例
				const scatterMap = echarts.init(document.getElementById("scatterMap"));
				//城市经纬度
				const scatterGeo = {
					"陕西师范大学":[108.90, 37.16],"哈尔滨工业大学":[126.64, 45.75],"西北工业大学":[108.77, 36.04],"天津大学":[117.18, 39.12],"西北工业大学":[108.77, 34.04],"华中师范大学":[114.37, 30.52],"四川大学":[104.09, 30.64],"北京邮电大学":[116.30, 40.16],"海军航空大学":[121.43, 37.54],"武汉大学":[114.37, 30.54],"中国石油大学克拉玛依校区":[84.93, 45.55],"河南警察学院":[113.83, 34.80],"北京语言大学":[116.35, 40.00],"中国人民解放军陆军边海防学院":[109.00, 34.23],"河南师范大学":[113.92, 35.33],"天津科技大学":[117.72, 39.09],"集美大学":[118.10, 24.59],"南京邮电大学":[118.94, 32.12],"北京邮电大学":[116.30, 40.16],"北京林业大学":[116.35, 40.01],"沈阳航空航天大学":[123.41, 41.93],"河南大学软件学院":[114.32, 34.82],"齐鲁工业大学":[116.82, 36.56],"天津商业大学":[117.13, 39.19],"北方工业大学":[116.21, 39.93],"武警工程大学":[108.84, 34.29],"上海大学":[121.40, 31.32],"郑州大学":[113.54, 34.82],"电子科技大学":[103.94, 30.76],"河南大学":[114.38, 34.82],"河南中医药大学":[113.81, 34.79],"河南大学":[114.38, 34.82],"郑州大学":[113.54, 34.82],"石河子大学":[86.06, 44.31],"河南大学":[114.38, 34.82],"郑州大学":[113.54, 34.82],"河南师范大学":[113.92, 35.33],"河南科技大学":[112.43, 34.61],"河南大学":[114.38, 34.82],"河南中医药大学":[113.81, 34.79],"河北师范大学":[114.53, 38.00],"河南大学":[114.38, 34.82],"信阳师范学院":[114.05, 32.14],
				};
				//城市数据
				const scatterVal = [
						{name:"陕西师范大学", value:"李思慧"},{name:"哈尔滨工业大学", value:"王梦鸽"},{name:"西北工业大学", value:"杜恒祎"},{name:"天津大学", value:"任肖旺"},{name:"西北工业大学", value:"杜高源"},{name:"华中师范大学", value:"杨淋"},{name:"四川大学", value:"张世航"},{name:"北京邮电大学", value:"韩泽杰"},{name:"海军航空大学", value:"成永康"},{name:"武汉大学", value:"马子桢"},{name:"中国石油大学克拉玛依校区", value:"赵佳辉"},{name:"河南警察学院", value:"杨向榕"},{name:"北京语言大学", value:"苗雨露"},{name:"中国人民解放军陆军边海防学院", value:"姚党禾"},{name:"河南师范大学", value:"李秋雨"},{name:"天津科技大学", value:"卢家慧"},{name:"集美大学", value:"张林河"},{name:"南京邮电大学", value:"赵俊潮"},{name:"北京邮电大学", value:"程浩博"},{name:"北京林业大学", value:"周界林"},{name:"沈阳航空航天大学", value:"丁硕"},{name:"河南大学软件学院", value:"赵治朴"},{name:"齐鲁工业大学", value:"李岩峰"},{name:"天津商业大学", value:"白明坤"},{name:"北方工业大学", value:"李鑫"},{name:"武警工程大学", value:"梁宝宸"},{name:"上海大学", value:"吴枫 张欣"},{name:"郑州大学", value:"刘云森"},{name:"电子科技大学", value:"宋思远"},{name:"河南大学", value:"胡留岩"},{name:"河南中医药大学", value:"王一岚"},{name:"河南大学", value:"晋豫同"},{name:"郑州大学", value:"杨振楠"},{name:"石河子大学", value:"张博"},{name:"河南大学", value:"赵治朴"},{name:"郑州大学", value:"张智凯 卫佳佳 黄智超 刘云森 刘恒 李世杰 杨振楠"},{name:"河南师范大学", value:"李秋雨"},{name:"河南科技大学", value:"王苏毅"},{name:"河南大学", value:"白泽中"},{name:"河南中医药大学", value:"梁一帆"},{name:"河北师范大学", value:"翟志彬"},{name:"河南大学", value:"郭子琳"},{name:"信阳师范学院", value:"郑婉琳"},
				];
				//数据转换，转换后的格式：[{name: 'cityName', value: [lng, lat, val]}, {...}]
				const convertScatterData = function(data) {
				    let res = [];
				    for(let i=0;i<data.length;i++) {
				        let geoCoord = scatterGeo[data[i].name];
				        if(geoCoord) {
				            res.push({
				                name: data[i].name,
				                value: geoCoord.concat(data[i].value)
				            });
				        }
				    }
				    return res;
				};
				//地图配置项
				const sactterMapOpt = {
					title: {
						text: '各学校分布图',
						x: 'center',
						textStyle: {
							color: '#fff'
						}
					},
					legend: {
						data: ['各校名单'], //与series的name属性对应
				        orient: 'vertical',
				        y: 'bottom',
				        x: 'right',
				        textStyle: {
				            color: '#fff'
				        }
				    },
					tooltip: {
				        trigger: 'item',
				        formatter: function(params) {
				            return params.name + ' : ' + params.value[2];
				        }
				    },
					geo: {
				        map: 'china',
				        roam: false, //开启鼠标缩放和漫游
				        zoom: 1, //地图缩放级别
						selectedMode: false, //选中模式：single | multiple
						left: 0,
						right: 0,
						top: 0,
						bottom: 0,
						layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
						layoutSize: '100%',
				        label: {
				            emphasis: {
				                show: false
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: '#101f32',
				                borderWidth: 1.1,
				                borderColor: '#43d0d6'
				            },
				            emphasis: {
				                areaColor: '#069'
				            }
				        }
				    },
				    series: [{
			            name: 'PM2.5',
			            type: 'scatter',
			            coordinateSystem: 'geo',
			            symbolSize: 12,
			            label: {
			                normal: {
			                    show: false
			                },
			                emphasis: {
			                    show: false
			                }
			            },
			            itemStyle: {
			                emphasis: {
			                    borderColor: '#fff',
			                    borderWidth: 1
			                }
			            },
			            data: convertScatterData(scatterVal)
			        }]
				};
				//渲染报表
				scatterMap.setOption(sactterMapOpt);
				
				/******************* 世界地图 ******************/
				//初始化echarts实例
				const worldMap = echarts.init(document.getElementById("worldMap"));
				const worldMapOpt = {
					geo: {
						map: 'world',
				        roam: false, //开启鼠标缩放和漫游
				        zoom: 1, //地图缩放级别
						selectedMode: false, //选中模式：single | multiple
						left: 0,
						right: 0,
						top: 0,
						bottom: 0,
						layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
						layoutSize: '100%',
				        label: {
				            emphasis: {
				                show: false
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: '#101f32',
				                borderWidth: 1.1,
				                borderColor: '#43d0d6'
				            },
				            emphasis: {
				                areaColor: '#069'
				            }
				        }
					}
				};
				worldMap.setOption(worldMapOpt);

				/********** 浏览器窗口改变时，重置报表大小 ****************/
				window.onresize = function() {
					flyMap.resize();
					scatterMap.resize();
					worldMap.resize();
					provinceMap.resize();
					cityMap.resize();
					countyMap.resize();
				}
			});
		</script>
	</body>
</html>